<template>
  <div class="songRank">
    <div class="official_rank">
      <div class="title">
        <p>官方榜</p>
      </div>
      <div class="list">
        <Rankli :officialrank="officialrank[0]" :id="ids[0]"></Rankli>
        <Rankli :officialrank="officialrank[1]" :id="ids[1]"></Rankli>
        <Rankli :officialrank="officialrank[2]" :id="ids[2]"></Rankli>
        <Rankli :officialrank="officialrank[3]" :id="ids[3]"></Rankli>
        <div class="rank">
          <div class="img" :style="'background-image: url(' + singerrank.coverUrl + ')' " @click="toSingerRank">
            <span class="time">{{ singerUpdateTime | showDate }}更新</span>
          </div>
          <div class="singerslist" v-for="(item, index) in artists" :key="index" @click="toSingerDetail(item.id)">
            <div class="name">
              <span class="num">{{ item.num }}</span>
              <span class="song_name"> {{ item.name }}</span>
            </div>
          </div>
          <div class="check_all">
            <span @click="toSingerRank">查看全部></span>
          </div>
        </div>
      </div>
    </div>
    <div class="global_rank">
      <div class="title">
        <p>全球榜</p>
      </div>
      <div class="rank_list">
        <div class="li" v-for="(item, index) in globalrank" :key="index" @click="toSongsList(item.id)">
          <div class="img">
            <img :src="item.coverImgUrl" />
            <div class="playCount"><i class="el-icon-headset"></i> {{ item.playCount >10000 ? (item.playCount / 10000).toFixed(0) + '万' : item.playCount }}
            </div>
            <i class="iconfont icon-playcircle"></i>
          </div>
          <span class="name">{{ item.name }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getAllTopList,
  getSingerRank
} from '../../../network/songsranking.js'
import Rankli from './Rankli.vue'
import {
  formatTime
} from '../../common/util.js'
export default {
  components: {
    Rankli
  },
  data () {
    return {
      ranklist: [],
      singerrank: {},
      officialrank: [],
      globalrank: [],
      ids: [],
      artists: [],
      singerUpdateTime: 0,
      nums: 1
    }
  },
  methods: {
    toSingerRank () {
      this.$router.push('/singer_rank')
    },
    toSingerDetail (id) {
      this.$router.push('/singer_detail/' + id)
    },
    getAllTopList () {
      getAllTopList().then(res => {
        // console.log(res.data)
        this.ranklist = res.data.list
        this.singerrank = res.data.artistToplist
        this.officialrank = this.ranklist.slice(0, 4)
        // console.log(this.officialrank)
        this.globalrank = this.ranklist.slice(4, 35)
        // console.log(this.globalrank)
        this.officialrank.forEach(item => {
          this.ids.push(item.id)
        })
      })
      // console.log(this.globalrank)
    },
    getSingerRank (type) {
      getSingerRank(type).then(res => {
        // console.log(res.data)
        this.artists = res.data.list.artists.slice(0, 8)
        this.artists.forEach(item => {
          item.num = this.nums++
        })
        this.singerUpdateTime = res.data.list.updateTime
        // console.log(this.artists)
      })
    },
    toSongsList (id) {
      this.$router.push('/songs/' + id)
    }
  },
  filters: {
    showDate: function (value) {
      const date = new Date(value)
      return formatTime(date, 'MM月dd日')
    }
  },
  created () {
    this.getAllTopList()
    this.getSingerRank(1)
  }
}
</script>

<style lang="less" scoped>
  .songRank {
    width: 95%;
    margin: 20px auto;
    overflow: auto;

    .official_rank {
      width: 100%;
      margin-bottom: 20px;

      .title {
        padding-bottom: 10px;
        border-bottom: 1px solid #e1e1e2;
        display: flex;
        align-items: flex-end;
        justify-content: space-between;

        p {
          font-size: 20px;
        }
      }

      .list {
        width: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;

        .rank {
          width: 31%;
          border: 1px solid #ededed;
          margin: 10px;

          .img {
            position: relative;
            width: 100%;
            height: 110px;
            box-sizing: border-box;
            // background-repeat: no-repeat;
            background-size: 100% 250px;
            background-position: 0 185px;
            overflow: hidden;

            i {
              position: absolute;
              bottom: 5%;
              right: 2%;
              font-size: 30px;
              color: #fff;
              border-radius: 50%;
            }

            i:hover {
              background: rgba(0, 0, 0, 0.4);
            }

            .time {
              position: absolute;
              bottom: 2%;
              left: 10%;
              color: #fff;
              font-size: 14px;
            }
          }

          .singerslist {
            width: 100%;
            display: flex;
            justify-content: space-between;
            padding: 7px 10px;
            box-sizing: border-box;

            .name {
              width: 80%;
              text-align: left;
              display: flex;
              align-items: center;

              .num {
                width: 10%;
                color: #e70000;
              }

              .song_name {
                width: 90%;
              }
            }
          }

          .singerslist:nth-child(2n) {
            background-color: #f5f5f7;
          }

          .singerslist:hover {
            background-color: #ebeced;
          }

          .check_all {
            width: 100%;
            background-color: #f5f5f7;
            padding: 10px;
            box-sizing: border-box;

            span {
              text-align: right;
              font-size: 15px;
              display: flex;
              justify-content: flex-end;
            }
          }
        }
      }
    }

    .global_rank {
      width: 100%;
      margin-bottom: 20px;

      .title {
        padding-bottom: 10px;
        border-bottom: 1px solid #e1e1e2;
        display: flex;
        align-items: flex-end;
        justify-content: space-between;

        p {
          font-size: 20px;
        }
      }

      .rank_list {
        width: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;

        // justify-content: space-around;
        .li {
          width: 15%;
          margin: 15px 1.63% 10px 0;

          .img {
            position: relative;

            img {
              width: 100%;
            }

            .playCount {
              position: absolute;
              top: 0;
              right: 0;
              width: 50%;
              height: 25px;
              color: #fff;
              font-size: 15px;
              line-height: 25px;
              text-align: right;
              padding-right: 5px;
              background-image: linear-gradient(to right, rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.4));
              transform: translateY(0);
              transition: transform 0.5s;
            }

            .icon-playcircle {
              position: absolute;
              bottom: 5%;
              right: 4%;
              font-size: 0px;
              color: #fff;
              background: rgba(0, 0, 0, 0.3);
              border-radius: 50%;
            }

            .icon-playcircle:hover {
              background: rgba(0, 0, 0, 0.5);
            }
          }

          .img:hover .icon-playcircle {
            font-size: 30px;
          }

          span.name {
            float: left;
          }
        }
      }
    }
  }
</style>
